<template>
	<view>
		<view class="f-navbar-body" :class="{'f-navbar-fixed':isFixed}" :style="'z-index:'+zIndex+';background-color:'+color">
			<view class="f-navbar" :style="'height:'+height+'px'">
				<view class="f-navbar-back"  :style="'z-index:'+(zIndex+1)+';height:'+height+'px'">
					<view class="iconfont iconfanhui f-navbar-back-icon" v-if="isBack" @click="goBack"></view>
				</view>
				<view class="f-navbar-title-box" :style="'z-index:'+zIndex">
					<slot name="title">
						<view v-if="title" class="f-navbar-title">{{title}}</view>
					</slot>
				</view>
				<view class="f-navbar-slot" :style="'z-index:'+(zIndex+1)">
					<slot >
						<view v-if="btnText" class="f-navbar-btn" :style="disabled?'opacity:.5':''" @click="disabled?'':onClick()">{{btnText}}</view>
					</slot>
				</view>
			</view>
		</view>	
		<view v-if="isFixed" :style="{ width: '100%', height: height + statusBarHeight + 'px' }"></view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		name: "f-navbar",
		props:{
			isBack: {
				type: [Boolean, String],
				default: true
			},
			isFixed: {
				type: [Boolean, String],
				default: true
			},
			// 导航栏标题
			title: {
				type: String,
				default: ''
			},
			btnText:{
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			// 自定义返回逻辑
			customBack: {
				type: Function,
				default: null
			},
			height:{
				type: Number,
				default: 44
			},
            disabled:{
                type: Boolean,
                default: false
            },
			zIndex:{
				type:Number,
				default:100,
			},
			color:{//背景颜色
				type:String,
				default:"#FFFFFF",	
			},
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight
			}
		},
		methods: {
			goBack() {
				// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
				if (typeof this.customBack === 'function') {
					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
					this.customBack.bind(this.$u.$parent.call(this))();
				} else {
					uni.navigateBack();
				}
			},
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.f-navbar-body {
		padding-top: var(--status-bar-height);
	}
	.f-navbar {
		display:flex;
		align-items:center;
		justify-content: space-between;
		padding:0 44rpx 0 0;
		width: 100%;
		position: relative;
	}
	.f-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
	}
	.f-navbar-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #1C1D1F;
		line-height: 48rpx;
	}
	.f-navbar-btn {
		font-size: 34rpx;
		font-weight: bold;
		color: #007AFF;
		line-height: 40rpx;
	}
	.f-navbar-title-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		position: absolute;
		left: 0;
		right: 0;
		top:0;
		bottom:0;
		text-align: center;
		flex-shrink: 0;
	}
	.f-navbar-back {
		display: flex;
		align-items: center;
	}
	.f-navbar-back-icon {
		padding-left:34rpx;
		padding-right: 30rpx;
	}
</style>
